<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Fillerup JQuery Plugin demo</title>
    <link rel="stylesheet" href="demo.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="../src/jquery.fillerup.js"></script>
    <script type="text/javascript">

$(window).load(function(){
        
    $('div.col-2').fillerup({

        alignWith: 'div.col-main',

	content: function(options){
	    $(this).append('<div style="background:#ddd;height:' + options.diff + 'px">Adding some stuff of exact height to fill up the right column.</div>');
	    return false;
	}
    });
});

    </script>
  </head>
  <body>
    <h1>Demo: Exact Height</h1>
    <p><a href="index.html">&lt; Back to Fillerup</a></p>
    <div>
      <div class="col-main">

	<p>This is the main column. Let's fill it up with a bunch of long text to stretch it out.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum commodo lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu erat sed diam tincidunt luctus. Donec rutrum porta tellus. Morbi erat. Pellentesque sodales dignissim turpis. Nullam arcu tellus, laoreet non, sagittis ut, dictum sit amet, libero. Quisque pharetra ultrices nunc. Phasellus turpis lectus, convallis nec, placerat eu, facilisis in, libero. Suspendisse vel odio. Vestibulum consectetur tincidunt felis. In iaculis dolor ut lacus. Vestibulum pharetra luctus odio. Sed lacinia sapien quis risus. Fusce egestas metus vel mi. Aliquam ultrices justo quis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc ligula, ultricies quis, adipiscing ut, aliquam at, nunc.</p>

	<p>Aliquam erat volutpat. Integer pretium placerat nunc. Aliquam eget quam. Fusce congue scelerisque enim. Sed facilisis leo ut nulla. Aenean tristique nisi sit amet magna. Morbi et arcu. In consectetur venenatis purus. Etiam feugiat metus a augue. Pellentesque facilisis ligula eu est. Vivamus hendrerit. In lacinia tincidunt neque. Suspendisse interdum condimentum eros. Phasellus hendrerit imperdiet elit. Proin enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

	<p>Duis sapien magna, rhoncus id, sollicitudin et, scelerisque sed, tortor. Ut eget mi faucibus massa pretium aliquet. Integer sit amet lectus at eros tincidunt bibendum. Ut imperdiet arcu quis eros. Vivamus elementum urna et diam. Quisque facilisis aliquet libero. Cras quam massa, molestie eget, tempor et, aliquet suscipit, nulla. Sed sit amet dolor eget diam blandit congue. Praesent erat. Nullam tincidunt porta lorem.</p>

	<p>Integer molestie. Praesent velit purus, rhoncus a, elementum ut, lobortis ut, diam. Nullam sit amet lorem. Cras ut dolor. In tincidunt, mi non molestie hendrerit, risus augue viverra nisi, nec gravida dui arcu sit amet ante. Curabitur tristique, turpis sed hendrerit aliquam, nisi felis adipiscing lectus, nec lacinia erat nulla eu mauris. Vestibulum rhoncus, ligula sed consequat tincidunt, tortor odio tincidunt sapien, id dictum enim ligula vitae erat. Donec venenatis dui in libero. Phasellus non nunc quis mauris elementum lobortis. Morbi purus erat, tempus at, iaculis at, egestas in, odio. Mauris tellus magna, commodo id, cursus sit amet, congue ut, enim. Suspendisse ante. In a enim. Cras aliquam accumsan augue. Suspendisse felis sapien, elementum a, accumsan non, porta at, quam. Praesent sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer rutrum orci eu erat.</p>

	<p>Sed eu dolor sit amet nibh venenatis porttitor. Pellentesque malesuada. Aliquam rutrum neque a leo. Fusce libero arcu, pulvinar non, commodo et, consequat fermentum, nisi. Etiam a dolor posuere urna imperdiet rutrum. Nulla diam. Morbi metus libero, pellentesque faucibus, sodales nec, blandit et, augue. Aliquam vel sapien. Nullam eleifend tellus vitae diam. Quisque orci erat, ultricies nec, posuere sed, pretium id, eros. Morbi faucibus sapien. Maecenas nec leo et metus eleifend congue. Praesent ultricies accumsan nunc. Proin ultrices arcu vel magna. Mauris et elit at diam vehicula fringilla. Integer vitae nisl at mi fermentum congue. Etiam congue, nulla eleifend congue sollicitudin, augue odio tincidunt dolor, vel laoreet turpis tortor a magna. </p>

      </div>
      <div class="col-2">

	<p>This is the second column. We'll keep is short so it doesn't have enough content to fill out, until we run the Fillerup plugin.</p>

      </div>
    </div>
  </body>
</html>
